<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>设置 - 贵州四季康养文旅</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tdesign-icons-vue-next/dist/index.min.css">
    <style>
        body {
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
            background-color: #f0f2f5;
            color: #333;
            overflow-x: hidden;
        }
        .header {
            background-color: #fff;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .info-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 16px;
        }
        .divider {
            height: 1px;
            background-color: #f0f0f0;
            margin: 0;
        }
        .setting-item {
            padding: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .switch {
            position: relative;
            display: inline-block;
            width: 44px;
            height: 24px;
        }
        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #ccc;
            transition: .4s;
            border-radius: 24px;
        }
        .slider:before {
            position: absolute;
            content: "";
            height: 20px;
            width: 20px;
            left: 2px;
            bottom: 2px;
            background-color: white;
            transition: .4s;
            border-radius: 50%;
        }
        input:checked + .slider {
            background-color: #0052d9;
        }
        input:checked + .slider:before {
            transform: translateX(20px);
        }
    </style>
</head>
<body>
    <div class="pb-6">
        <!-- 顶部导航 -->
        <div class="header flex items-center p-4 border-b">
            <div class="w-8 h-8 flex items-center justify-center" onclick="history.back()">
                <i class="t-icon t-icon-chevron-left text-xl"></i>
            </div>
            <h1 class="text-lg font-medium flex-1 text-center">设置</h1>
            <div class="w-8 h-8"></div>
        </div>
        
        <!-- 个人信息设置 -->
        <div class="px-4 mt-4">
            <div class="info-card">
                <a href="personal_info.html" class="setting-item">
                    <div class="flex items-center">
                        <span>个人资料</span>
                    </div>
                    <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                </a>
                
                <div class="divider"></div>
                
                <a href="account_security.html" class="setting-item">
                    <div class="flex items-center">
                        <span>账户与安全</span>
                    </div>
                    <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                </a>
            </div>
        </div>
        
        <!-- 通知设置 -->
        <div class="px-4 mt-4">
            <div class="info-card">
                <a href="notification.html" class="setting-item">
                    <div class="flex items-center">
                        <span>通知设置</span>
                    </div>
                    <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                </a>
                
                <div class="divider"></div>
                
                <div class="setting-item">
                    <span>接收订单通知</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                
                <div class="divider"></div>
                
                <div class="setting-item">
                    <span>接收活动通知</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                
                <div class="divider"></div>
                
                <div class="setting-item">
                    <span>接收系统通知</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
        </div>
        
        <!-- 隐私设置 -->
        <div class="px-4 mt-4">
            <div class="info-card">
                <a href="privacy.html" class="setting-item">
                    <div class="flex items-center">
                        <span>隐私设置</span>
                    </div>
                    <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                </a>
                
                <div class="divider"></div>
                
                <div class="setting-item">
                    <span>位置信息</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                
                <div class="divider"></div>
                
                <div class="setting-item">
                    <span>个性化推荐</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                
                <div class="divider"></div>
                
                <div class="setting-item">
                    <span>浏览历史</span>
                    <label class="switch">
                        <input type="checkbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
            </div>
        </div>
        
        <!-- 通用设置 -->
        <div class="px-4 mt-4">
            <div class="info-card">
                <div class="setting-item">
                    <span>清除缓存</span>
                    <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                </div>
                
                <div class="divider"></div>
                
                <div class="setting-item">
                    <span>检查更新</span>
                    <div class="flex items-center">
                        <span class="text-xs text-gray-400 mr-2">当前版本 1.0.0</span>
                        <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                    </div>
                </div>
                
                <div class="divider"></div>
                
                <div class="setting-item">
                    <span>关于我们</span>
                    <i class="t-icon t-icon-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
        
        <!-- 退出登录 -->
        <div class="px-4 mt-4">
            <button class="w-full bg-white text-red-500 font-medium py-3 rounded-lg shadow-sm">
                退出登录
            </button>
        </div>
    </div>
</body>
</html> 